<template>
  <div>
    <!--上部导航栏开始-->
    <headerView></headerView>
    <!--上不导航栏结束-->
    <!--中间核心-->
    <div class="product">
      <!--头上表格-->
      <div class="product-table">
        <div class="product-left">
          <table class="table table-bordered">
            <tr class="text-center">
              <td class="title-td">
                <router-link to="/new_product">基本信息</router-link>
              </td>
              <td class="active title-td">
                <router-link to="new_info">项目信息</router-link>
              </td>
              <td class="title-td"><router-link to="new_detail">详细描述</router-link></td>
              <td class="title-td"><router-link to="new_back">回报设置</router-link></td>
            </tr>
          </table>
        </div>
        <div class="product-right">
          <table class="table table-bordered">
            <tr class="text-center">
              <td class="title-td">预览</td>
            </tr>
          </table>
        </div>
      </div>
      <!--下部foem表单-->
      <div class="product-form">
        <!--上标题-->
        <div class="product-title">
          <div class="my-h4">
            <h4>创建你的项目信息</h4>
          </div>
          <div class="btn-save">
            <button class="btn btn-default" @click="saveInfo()">保存草稿</button>
          </div>
        </div>
        <div class="clear"></div>
        <hr />
        <!--表单-->
        <form>
          <div class="my-form">
            <div class="product-info-input">
              <b>设置封面：</b>
              <input type="file" @change="handleFileUpload"/>
            </div>
            <div class="product-info-input">
              <b>项目标题：</b
              ><input
                class="text"
                type="text"
                placeholder="给自己的项目起个漂亮的名字吧"
                v-model="forms.title"
              />
            </div>
            <div class="product-info-input">
              <b>筹款目的：</b>
              <div class="text-area">
                <textarea
                  rows="2"
                  placeholder="一句话介绍一下你的项目吧"
                  v-model="forms.goal"
                ></textarea>
              </div>
            </div>
            <div class="product-info-select">
              <div class="product-info-text"><b>项目地点：</b></div>
              <div class="product-info-select1">
                <select class="info-select1">
                  <option>请选择</option>
                </select>
              </div>
              <div class="product-info-select2">
                <select class="info-select2">
                  <option>请选择</option>
                </select>
              </div>
            </div>

            <div class="product-info-input">
              <b>筹资金额：</b
              ><input
                class="text"
                type="text"
                placeholder="输入你需要的金额，最少500元"
                v-model="forms.money"
              />元
            </div>
            <div class="product-info-input">
              <b>筹资天数：</b
              ><input class="text" type="text" placeholder="" v-model="forms.days"/>天
            </div>
          </div>
        </form>
      </div>
    </div>
    <!--底部开始-->
    <div id="bottom">
      <blowView></blowView>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      forms:{
        image_url:'',
        title:'',// 项目标题
        goal:'',// 筹款目的
        city_id:'',// 项目地点
        money:'',// 筹款金额
        days:''// 筹款天数

      },
      selectedFile: null,//文件上传
    }
  },
  created(){

  },
  methods:{
    // 用于文件上传功能
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
      // this.forms.image_url = this.selectedFile.name;


      //发送文件给后端，把上传的文件发送给后端
      const formData = new FormData();
      formData.append('file', this.selectedFile);
      this.$axios.post('http://localhost:8080/upload',formData,{
        headers: {
            'Content-Type': 'multipart/form-data',
          }
      }).then(response => {
          if(response.data.code===0){
            console.log("文件上传下载失败了！！！")
          }else{
            console.log(response.data.data)
            this.forms.image_url = response.data.data;
          }
      });
    },
    saveInfo(){
    console.log(JSON.stringify(this.forms))
    sessionStorage.setItem("forms2",JSON.stringify(this.forms))
    }
  }
};
</script>

<style scoped>
@import url("../../public/css/bootstrap.min.css");
@import url("../../public/css/base.css");
@import url("../../public/css/headbott.css");
@import url("../../public/css/index.css");
@import url("../../public/css/ly-list.css");
@import url("../../public/css/reg.css");
@import url("../../public/css/style.css");
</style>